<template>
  <div class="collect-root">
    <div class="sensor-card">
      <div class="header-section">
        <h2>视觉相机</h2>
        <img src="/src/assets/sensor.png" alt="Sensor" class="device-image" />
      </div>
      <div class="input-section">
        <div class="input-item-no-input">
          <span class="red-diamond">◆</span>
          <h4>光圈与光源亮度</h4>
          <span class="red-diamond">◆</span>
          <h4>曝光时间与增益</h4>
          <span class="red-diamond">◆</span>
          <h4>白平衡</h4>
          <span class="red-diamond">◆</span>
          <h4>焦距与对焦</h4>
        </div>
        <div class="input-group">
          <div class="group-title">调试方法:</div>
          <el-input
            v-model="question_gq_1"
            type="textarea"
            :rows="1"
            placeholder="请输入调试方法..."
            @input="onInput_gq_1('question', $event)"
            class="group-input"
          />

          <el-input
            v-model="question_pg_2"
            type="textarea"
            :rows="1"
            placeholder="请输入调试方法..."
            @input="onInput_pg_2('question', $event)"
            class="group-input"
          />

          <el-input
            v-model="question_bph_3"
            type="textarea"
            :rows="1"
            placeholder="请输入调试方法..."
            @input="onInput_bph_3('question', $event)"
            class="group-input"
          />
          <el-input
            v-model="question_jj_4"
            type="textarea"
            :rows="1"
            placeholder="请输入调试方法..."
            @input="onInput_jj_4('question', $event)"
            class="group-input"
          />
        </div>

        <div class="input-group">
          <div class="group-title">注意事项:</div>
          <el-input
            v-model="answer_gq_1" 
            type="textarea"
            :rows="1"
            placeholder="请输入注意事项..."
            @input="onInput_gq_1('answer', $event)"
            class="group-input"
          />
          <el-input
            v-model="answer_pg_2"
            type="textarea"
            :rows="1"
            placeholder="请输入注意事项..."
            @input="onInput_pg_2('answer', $event)"
            class="group-input"
          />
          <el-input
            v-model="answer_bph_3"
            type="textarea"
            :rows="1"
            placeholder="请输入注意事项..."
            @input="onInput_bph_3('answer', $event)"
            class="group-input"
          />
          <el-input
            v-model="answer_jj_4"
            type="textarea"
            :rows="1"
            placeholder="请输入注意事项..."
            @input="onInput_jj_4('answer', $event)"
            class="group-input"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { updateQuestion as apiUpdateQuestion, updateTeachingAnswer as apiUpdateAnswer } from '../api'

const route = useRoute()
const userId = computed(() => Number(route.query.user_id) || 0)

const question_gq_1 = ref('')
const question_pg_2 = ref('')
const question_bph_3 = ref('')
const question_jj_4 = ref('')

const answer_gq_1 = ref('')
const answer_pg_2 = ref('')
const answer_bph_3 = ref('')
const answer_jj_4 = ref('')

let timers = {}

function onInput_gq_1(type, event) {
  if (timers[type]) clearTimeout(timers[type])
  const value = event && event.target ? event.target.value : ''
  timers[type] = setTimeout(() => {
    if (type === 'question') {
      apiUpdateQuestion(userId.value, 2, 2, question_gq_1.value)
        .catch(error => console.error('Error updating question:', error))
    } else if (type === 'answer') {
      apiUpdateAnswer(userId.value, 2, 2, answer_gq_1.value)
        .catch(error => console.error('Error updating answer:', error))
    }
  }, 500)
}

function onInput_pg_2(type, event) {
  if (timers[type]) clearTimeout(timers[type])
  const value = event && event.target ? event.target.value : ''
  timers[type] = setTimeout(() => {
    if (type === 'question') {    
      apiUpdateQuestion(userId.value, 2, 3, question_pg_2.value)
        .catch(error => console.error('Error updating question:', error))
    } else if (type === 'answer') {
      apiUpdateAnswer(userId.value, 2, 3, answer_pg_2.value)
        .catch(error => console.error('Error updating answer:', error))
    }
  }, 500)
} 

function onInput_bph_3(type, event) {
  if (timers[type]) clearTimeout(timers[type])
  const value = event && event.target ? event.target.value : ''
  timers[type] = setTimeout(() => {
    if (type === 'question') {
      apiUpdateQuestion(userId.value, 2, 4, question_bph_3.value)
        .catch(error => console.error('Error updating question:', error))
    } else if (type === 'answer') {
      apiUpdateAnswer(userId.value, 2, 4, answer_bph_3.value)
        .catch(error => console.error('Error updating answer:', error))
    }
  }, 500)       
}

function onInput_jj_4(type, event) {
  if (timers[type]) clearTimeout(timers[type])
  const value = event && event.target ? event.target.value : ''
  timers[type] = setTimeout(() => {
    if (type === 'question') {
      apiUpdateQuestion(userId.value, 2, 5, question_jj_4.value)
        .catch(error => console.error('Error updating question:', error))
    } else if (type === 'answer') {
      apiUpdateAnswer(userId.value, 2, 5, answer_jj_4.value)
        .catch(error => console.error('Error updating answer:', error))
    } 
  }, 500)
}                               

</script>

<style scoped>
.collect-root {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg, #f5f7fa);
  padding: 20px;
}
.sensor-card {
  background-color: #e6ffe6;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  min-width: 400px;
}
.header-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}
.header-section h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #409eff;
  margin: 0;
}
.device-image {
  width: 120px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.input-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.input-item-no-input {
  display: flex;
  align-items: center;
  gap: 10px;
}
.input-item-no-input h3 {
  font-size: 1.2rem;
  font-weight: 500;
  color: #333;
  margin: 0;
}
.red-diamond {
  color: #f56c6c;
  font-size: 1.2rem;
}
.input-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.group-title {
  font-size: 1.05rem;
  color: #409eff;
  font-weight: 500;
}
.group-input {
  width: 100%;
}
</style>